<template>
    <div class="dialog-wrapper" @touchend="stopEvent" v-if="show">
        <div class="dialog-inner">
            <image class="close" :src="imgPath('dialog_close.png')" @click="closeDialog"></image>
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
  name: 'dialog',
  props: ['show'],
  methods: {
    stopEvent (e) {
      const { platform } = weex.config.env
      platform === 'Web' && e.preventDefault && e.preventDefault()
    },
    closeDialog () {
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
    .dialog-wrapper {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        background-color: rgba(43, 48, 64, 0.5);
    }
    .dialog-inner {
        position: absolute;
        top: 230px;
        left: 116px;
        width: 518px;
        padding-top: 52px;
        padding-bottom: 52px;
        border-radius: 10px;
        background-color: #fff;
    }
    .close {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
    }
</style>
